<!DOCTYPE html><%@
	include file="/WEB-INF/includes/taglibs.jsp" %><%@
	page import="com.google.appengine.api.blobstore.*" %><%@
	page import="com.google.appengine.api.users.*" %>
<html>
<head>
<title>MapReduce Made Easy</title>
<link type="text/css" rel="stylesheet" href="/styles/default.css"/>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<style type="text/css">
.main {
  max-width: 800px;
  padding: 1em;
  margin: 0 auto;
}
pre {
  border: 1px solid #bbb;
  background-color: #fafafa;
  padding: 6px 10px;
  font-family: monospace;
}
code {
  color: #007000;
  font-family: monospace;
  font-size: 1.25em;
}
.outputfiles {
  max-width: 10em;
  overflow: hidden;
  list-style-position: inside
}
ul.outputfiles li, ol.outputfiles li {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
</style>
</head>
<body><%
	BlobstoreService blobstoreService = BlobstoreServiceFactory.getBlobstoreService();
%>
<div class="main">
	<h1>MapReduce in Three Simple Steps</h1>
	<h2>Step 1: Choose your input file</h2>
	<p>Upload some new data (should be a zip file containing as many text files as you like).</p>
	<form class="wufoo" action="<%= blobstoreService.createUploadUrl("/demo/uploads") %>" method="post" enctype="multipart/form-data">
		<ul>
			<li><label for="file">From your computer:</label><input id="file" type="file" name="file" required="required" /></li>
			<li><label for="name">Give it a name:</label><input id="name" type="text" name="name" required="required" /></li>
			<li class="buttons"><input type="submit" value="Upload" /></li>
		</ul>
	</form>
	<h2>Step 2: Run your MapReduce job</h2>
	<p><span><c:out value="${username}" /></span> files:</p>
	<c:if test="${not empty items}">
	<form id="runForm" action="/demo" method="post">
	<input type="hidden" name="filekey" value="" />
	<input type="hidden" name="blobkey" value="" />
	<table class="" border="1">
	<tr>
		<th></th>
		<th>Name</th>
		<th>Uploaded on</th>
		<th>Source</th>
		<th>Wordcount Link</th>
		<th>Index Link</th>
		<th>Phrases Link</th>
	</tr><c:forEach var="item" items="${items}">
	<tr>
		<td><input type="radio" name="" value="" onclick="updateForm('${item.key}', '${item.blobkey}', '${item.filename}')" /></td>
		<td><a href="<c:url value='/demo/uploads'><c:param name='id' value='${item.blobkey}' /></c:url>"><c:out value="${item.filename}" /></a></td>
		<td><fmt:formatDate pattern="EEE, MMM d h:mm:ss z" value="${item.uploadedOn}" /></td>
		<td>Uploaded by user</td>
		<td><c:if test="${not empty item.wordcount_jobId}">
				<a href="<c:url value='/_ah/pipeline/status.html'><c:param name='root' value='${item.wordcount_jobId}' /></c:url>">View Status</a> - <c:out value="${item.wordcount_jobState}" /><br/>
			</c:if><c:if test="${not empty item.wordcount_outputFiles}"><ul class="outputfiles">
				<c:forEach var="outputFile" items="${item.wordcount_outputFiles}">
					<li><a href="<c:url value='/demo/uploads'><c:param name='id' value='${outputFile.value}' /></c:url>"><c:out value="${outputFile.key}" /></a></li>
				</c:forEach></ul>
			</c:if></td>
		<td><c:if test="${not empty item.index_jobId}">
				<a href="<c:url value='/_ah/pipeline/status.html'><c:param name='root' value='${item.index_jobId}' /></c:url>">View Status</a> - <c:out value="${item.index_jobState}" /><br/>
			</c:if><c:if test="${not empty item.index_outputFiles}"><ul class="outputfiles">
				<c:forEach var="outputFile" items="${item.index_outputFiles}">
					<li><a href="<c:url value='/demo/uploads'><c:param name='id' value='${outputFile.value}' /></c:url>"><c:out value="${outputFile.key}" /></a></li>
				</c:forEach></ul>
			</c:if></td>
		<td><c:if test="${not empty item.phrases_jobId}">
				<a href="<c:url value='/_ah/pipeline/status.html'><c:param name='root' value='${item.phrases_jobId}' /></c:url>">View Status</a> - <c:out value="${item.phrases_jobState}" /><br/>
			</c:if><c:if test="${not empty item.phrases_outputFiles}"><ul class="outputfiles">
				<c:forEach var="outputFile" items="${item.phrases_outputFiles}">
					<li><a href="<c:url value='/demo/uploads'><c:param name='id' value='${outputFile.value}' /></c:url>"><c:out value="${outputFile.key}" /></a></li>
				</c:forEach></ul>
			</c:if></td>
	</tr></c:forEach>
	</table>
	<input type="submit" id="word_count" name="word_count" value="Word Count" disabled="disabled" />
	<input type="submit" id="index" name="index" value="Index" disabled="disabled" />
	<input type="submit" id="phrases" name="phrases" value="Phrases" disabled="disabled" />
	<input type="submit" id="delete" name="delete" value="Delete" disabled="disabled" />
	</form>
	</c:if><c:if test="${empty items}">
	<p>No files uploaded yet.</p>
	</c:if>
	<h2>Step 3: Sit back and enjoy!</h2>
	<p>Once your MapReduce job finishes, come back to this page and you'll see a link next to the input file you selected, depending on which job you ran.</p>
	<hr/>
	<h3>About MapReduce Made Easy</h3>
	<p>MapReduce Made Easy is a more accessible version of the original mapreduce test application found in the App Engine MapReduce source code, designed by Mike Aizatsky. Retouching work done by Chris Bunch - learn more about <a href="http://mapreduce.appspot.com">App Engine MapReduce</a> and make your own apps!</p>
	<p><a href="https://code.google.com/p/appengine-mapreduce-java-demo">This version is written in Java!</a></p>
	<div style="margin: 1em; text-align:center"><img src="https://developers.google.com/appengine/images/appengine-silver-120x30.gif" alt="Powered by Google App Engine" /></div>
</div>
<script type="text/javascript">
var $word_count = document.getElementById('word_count');
var $index = document.getElementById('index');
var $phrases = document.getElementById('phrases');
var $delete = document.getElementById('delete');
function updateForm(filekey, blobkey, filename) {
  var runForm = document.getElementById('runForm');
  runForm.filekey.value = filekey;
  runForm.blobkey.value = blobkey;
  $word_count.removeAttribute('disabled');
  $index.removeAttribute('disabled');
  $phrases.removeAttribute('disabled');
  $delete.removeAttribute('disabled');
}
</script>
</body>
</html>
